<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sortable 拖拽</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest Sortable -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>

</head>
<style>
    .glyphicon-move {
        /* 允许拖动 */
        cursor: move;
        cursor: -webkit-grabbing;
    }

    .sortable-ghost {
        background: #f33;
        opacity: .3;
    }

    .sortable-chosen {
        background: #ff3;
        opacity: .3;
    }

    .sortable-drag {
        background: #39fff3;
        opacity: .3;
    }

    .sortable-fallback {
        background: #000;
        opacity: .3;
    }

    fieldset {
        margin-top: 20px;
    }

    fieldset ul {
        background: #f3f3f3;
        min-height: 20px;
    }

    code {
        white-space: pre-wrap;
    }
</style>

<body>
    <div class="container">
        <section class="card ">
            <header class="card-header">目录</header>
            <div class="container">
                <p>Sortable 是一个JavaScript库reorderable拖放列表在现代浏览器和触摸设备上。例如引导。<a href="https://github.com/RubaXa/Sortable">http://rubaxa.github.io/Sortable/</a></p>
                <ul>
                    <li><a href="#api">Api</a></li>
                    <li><a href="#demo">demo基础</a></li>
                    <li><a href="#more">demo 多个列表</a></li>

                </ul>
            </div>
        </section>
        <fieldset id='api'>
            <legend>API 参数说明</legend>
            <code>
//el dom 节点                
var sortable = new Sortable(el, {
    //
	group:{
        name:'',//设置队列名
        pull: [true, false, 'clone'拷贝对象 ],//拖拽设置 支持function(to,form)
        put:[true, false, 'clone'] //投入设置 同上
    },  
    
    sort: true,  // 整理队列

	delay: 0, // 开始排序时的延时
    
    disabled: false, // true 则失效.
    
    store: null,  // @see Store
    
    animation: 150,  // 执行动画的时间
    
    handle: ".my-handle",  //设置拖拽的目标
    
    filter: ".ignore-elements",  //目标不会被拖拽(String or Function)
    
	preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
    
    draggable: ".item",  // 指定目标可拖拽
    
    ghostClass: "sortable-ghost",  // 拖拽时站位目标的样式
    
    chosenClass: "sortable-chosen",  // 选中时站位目标的样式
    
    dragClass: "sortable-drag",  // 拖拽目标的样式
	dataIdAttr: 'data-id',

	forceFallback: false,  // 忽略了HTML5 DnD行为和强迫回退

	fallbackClass: "sortable-fallback",  // Class name for the cloned DOM Element when using forceFallback
	fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body
	fallbackTolerance: 0, //阻力效果       
	
	scroll: true, // or HTMLElement
	scrollFn: function(offsetX, offsetY, originalEvent) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
    
    scrollSensitivity: 30, // px,滚动跳滚动到n跟随滚动.
    
    scrollSpeed: 10, // px

	setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
		dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
	},

	// Element is chosen
	onChoose: function (/**Event*/evt) {
		evt.oldIndex;  // element index within parent
	},

	// Element dragging started
	onStart: function (/**Event*/evt) {
		evt.oldIndex;  // element index within parent
	},

	// Element dragging ended
	onEnd: function (/**Event*/evt) {
		evt.oldIndex;  // element's old index within parent
		evt.newIndex;  // element's new index within parent
	},

	// Element is dropped into the list from another list
	onAdd: function (/**Event*/evt) {
		var itemEl = evt.item;  // dragged HTMLElement
		evt.from;  // previous list
		// + indexes from onEnd
	},

	// Changed sorting within list
	onUpdate: function (/**Event*/evt) {
		var itemEl = evt.item;  // dragged HTMLElement
		// + indexes from onEnd
	},

	// Called by any change to the list (add / update / remove)
	onSort: function (/**Event*/evt) {
		// same properties as onUpdate
	},

	// Element is removed from the list into another list
	onRemove: function (/**Event*/evt) {
		// same properties as onUpdate
	},

	// Attempt to drag a filtered element
	onFilter: function (/**Event*/evt) {
		var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
	},

	// Event when you move an item in the list or between lists
	onMove: function (/**Event*/evt, /**Event*/originalEvent) {
		// Example: http://jsbin.com/tuyafe/1/edit?js,output
		evt.dragged; // dragged HTMLElement
		evt.draggedRect; // TextRectangle {left, top, right и bottom}
		evt.related; // HTMLElement on which have guided
		evt.relatedRect; // TextRectangle
		originalEvent.clientY; // mouse position
		// return false; — for cancel
	},
	
	// Called when creating a clone of element
	onClone: function (/**Event*/evt) {
		var origEl = evt.item;
		var cloneEl = evt.clone;
	}
});
            </code>
        </fieldset>

        <fieldset id='demo'>
            <legend>dome基础</legend>
            <p>
                <code>Sortable.create(el, { /* options */ });</code>
            </p>
            <!-- Simple List -->
            <div id="simpleList" class="list-group">
                <div class="list-group-item ">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></div>
                <div class="list-group-item">It works with Bootstrap...</div>
                <div class="list-group-item">...out of the box.</div>
                <div class="list-group-item">It has support for touch devices.</div>
                <div class="list-group-item">Just drag some elements around.</div>
            </div>
        </fieldset>
        <script>
            // get dom
            var simpleList = document.querySelector("#simpleList");
            //init new 用来区分 sortable
            var sortable1 = new Sortable.create(simpleList, { /* options */ });
        </script>


        <fieldset id='more'>
            <legend>dome多个队列</legend>
            <p>
                <code>
                Sortable.create(el, {
                group: {
                    name:'',//设置队列名
                    put:[true, false, clone] //投入设置 
                    pull: [true, false, clone拷贝对象 ],//拖拽设置 支持function(to,form)
                },
                animation: 100
            });

                </code>
            </p>
            <!-- Simple List -->
            <ul id="foo" style="">
                <li>foo 1</li>
                <li class="dis">foo 2</li>
                <li>foo 3</li>
                <li>foo 4</li>
                <li>foo 5</li>
                <li>foo 6</li>
                <li>foo 7</li>
                <li>foo 8</li>
                <li>foo 9</li>

            </ul>

            <ul id="bar">
                <li>bar 1</li>
                <li>bar 2</li>
                <li>bar 3</li>
            </ul>

            <ul id="qux">
                <li>qux 1</li>
            </ul>


        </fieldset>
        <script>
            var foo = document.querySelector("#foo");
            Sortable.create(foo, {
                group: 'foo',
                //过滤
                filter: '.dis',
                animation: 100,
                //开启H5 DXD
                forceFallback: true,
                // //阻力效果
                // fallbackTolerance: 1,
                //滚动跳滚动到n跟随滚动
                scrollSensitivity: 30

            });
            var bar = document.querySelector("#bar");

            Sortable.create(bar, {
                group: {
                    name: 'bar',
                    //设置允许置如的目标
                    put: 'qux',
                    //设置拉取时的条件
                    pull: function (to, from) {
                        return from.el.children.length > 2 || 'clone';
                    }
                },
                animation: 100
            });
            var bar = document.querySelector("#qux");
            Sortable.create(qux, {
                group: {
                    name: 'qux',
                    put: function (to) {
                        return to.el.children.length < 4;
                    }
                },
                animation: 100
            });
        </script>
    </div>
</body>

</html>